<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 使用xhr发去get请求
        let xhr = new XMLHttpRequest();
        //调用open方法指定请求方式与url地址
        xhr.open('get', 'http://www.liulongbin.top:3006/api/getbooks');
        //调用send方法发起Ajax请求
        xhr.send();
        //监听onreadystatechange事件
        xhr.onreadystatechange = function() {
            console.log(xhr.readyState);
            //判断状态码 readyState 是xhr对象的请求状态；status是服务器相应状态
            if (xhr.readyState == 4 && xhr.status == 200) {
                //获取响应数据
                let data = JSON.parse(xhr.responseText);
                console.log(data);


            }
        };
        // 发起带参数的请求只需要在url地址指定参数即可，这种参数叫做查询字符串
        // xhr.open('get', 'http://www.liulongbin.top:3006/api/getbooks?id=1');

        console.log('西游记：' + encodeURI('西游记'));
        console.log('吴承恩：' + encodeURI('吴承恩'));
        console.log('天津图书出版社：' + encodeURI('天津图书出版社'));
        //使用xhr发送post请求
        //调用open方法指定请求方式与url地址
        xhr.open('post', 'http://www.liulongbin.top:3006/api/addbook');
        //设置请求头
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        //调用send方法发起Ajax请求
        xhr.send('bookname=%E8%A5%BF%E6%B8%B8%E8%AE%B0&author=%E5%90%B4%E6%89%BF%E6%81%A9&publisher=%E5%A4%A9%E6%B4%A5%E5%9B%BE%E4%B9%A6%E5%87%BA%E7%89%88%E7%A4%BE');
    </script>
</body>

</html>